<template>
    <div>
        <a-card>
            <p slot="title">
                资源配置管理
            </p>
            <a-form ref="form" :form="form">
           <!-- <div class="syMsg" style="padding-bottom: 0px">
                <div class="syMsgTit">日志服务器设置</div>
                <div class="syMsgCot" style="margin-bottom: 0">
                    <div class="onePageMsg" style="min-height: 100px !important;">
                        <a-form-item label="日志服务器IP：" v-bind="formStyle" required>
                            <a-input type="text"  class="formWidth" v-decorator="[
                                        'mainIp',
                                        {
                                            rules: [{ required: true}, { validator: this.verify.validateIP.bind(this) }],
                                            getValueFromEvent: event => {
                                                return this.verify.formalIP(event,18)
                                            }
                                        }
                                    ]"  placeholder="请输入IP地址"/>
                        </a-form-item>
                        <a-form-item label="日志服务器端口：" v-bind="formStyle" required>
                            <a-input type="text"  class="formWidth" v-decorator="[
                                        'port',
                                        {
                                            rules: [{ required: true}, { validator: this.verify.validateIP.bind(this) }],
                                            getValueFromEvent: event => {
                                                return this.verify.formalIP(event,18)
                                            }
                                        }
                                    ]"  placeholder="请输入端口号"/>
                        </a-form-item>
                        <div style="width: 100%; position: relative">
                            <a-form-item label="日志管理策略：" v-bind="formStyle">
                                <a-select placeholder="全部" allowClear style="width: 360px;"
                                          v-decorator="['syncHostTimeModel',  { rules: [{ required: true, message: '请选择日志管理策略' }] }]">
                                    <a-select-option v-for="item in syncHostTimeModelList" :value="item.value" :key="item.value">{{item.label }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                            <div class="strategyTypeClass">
                                <a-radio-group v-model = 'strategyObj.strategyType' style="float: left">
                                    <a-radio value="1" style="width:160px; margin-right: 30px;">按周期
                                        <a-select placeholder="全部" style="width: 80px;float: right; margin-top: -8px;" v-model="strategyObj.strategyDate">
                                            <a-select-option v-for="item in syncHostTimeModelList" :value="item.value" :key="item.value">{{item.label }}
                                            </a-select-option>
                                        </a-select>
                                    </a-radio>
                                    <a-radio value="0"  style="width:200px; margin-right: 40px;">按文件大小<a-select placeholder="全部" style="width: 80px;float: right; margin-top: -8px;" v-model="strategyObj.strategyFileSize">
                                        <a-select-option v-for="item in syncHostTimeModelList" :value="item.value" :key="item.value">{{item.label }}
                                        </a-select-option>
                                    </a-select></a-radio>
                                </a-radio-group>
                            </div>
                        </div>
                        <div style="width: 100%; position: relative">
                        <a-form-item label="日志级别设置：" v-bind="formStyle" required>
                            <a-select placeholder="全部" allowClear style="width: 360px;"
                                      v-decorator="['syncHostTimeModel',  { rules: [{ required: true, message: '请选择日志级别设置' }] }]">
                                <a-select-option v-for="item in syncHostTimeModelList" :value="item.value" :key="item.value">{{item.label }}
                                </a-select-option>
                            </a-select>
                            <div  class="strategyTypeClass" style="color: #a3a8b4; top:0px;left:380px;">（仅支持设置通信日志级别）</div>
                        </a-form-item>
                        </div>
                    </div>
                </div>
            </div>-->
            <div class="syMsg">
                <div class="syMsgTit">设备校时设置</div>
                <div class="syMsgCot" style="margin-bottom: 0">
                    <div class="onePageMsg" style="min-height: 100px !important;">
                        <a-form-item label="远程校时：" v-bind="formStyle" required>
                            <a-radio-group v-model = 'strategyObj.strategyType'>
                                <a-radio value="1" style="width:160px;margin-left: 20px; margin-right: 10px;">开启</a-radio>
                                <a-radio value="0" >关闭</a-radio>
                            </a-radio-group>
                        </a-form-item>
                        <a-form-item label="校时服务器地址：" v-bind="formStyle" required>
                            <a-input type="text"  class="formWidth" v-decorator="[
                                        'mainIp',
                                        {
                                            rules: [{ required: true}, { validator: this.verify.validateIP.bind(this) }],
                                            getValueFromEvent: event => {
                                                return this.verify.formalIP(event,18)
                                            }
                                        }
                                    ]"  placeholder="请输入IP地址"/>
                        </a-form-item>
                        <a-form-item label="校时服务器端口：" v-bind="formStyle" required>
                            <a-input type="text"  class="formWidth" v-decorator="[
                                        'port',
                                        {
                                            rules: [{ required: true}, { validator: this.verify.validateIP.bind(this) }],
                                            getValueFromEvent: event => {
                                                return this.verify.formalIP(event,18)
                                            }
                                        }
                                    ]"  placeholder="请输入端口号"/>
                        </a-form-item>
                        <a-form-item label=" " v-bind="formStyle" class="noLabelAfter">
                            <a-button type="primary" size="default" class="btnGreen"  style="margin-left: 0">现在校时</a-button>
                        </a-form-item>
                    </div>
                </div>
            </div>
            <div class="syMsg">
                <div class="syMsgTit">AASTU密钥资源配置</div>
                <div class="syMsgCot" style="margin-bottom: 0">
                    <div class="onePageMsg" style="min-height: 100px !important;">
                        <a-form-item label="AASTU密钥系统地址：" v-bind="formStyle" required>
                            <a-input type="text"  class="formWidth" v-decorator="[
                                        'mainIp',
                                        {
                                            rules: [{ required: true}, { validator: this.verify.validateIP.bind(this) }],
                                            getValueFromEvent: event => {
                                                return this.verify.formalIP(event,18)
                                            }
                                        }
                                    ]"  placeholder="请输入IP地址"/>
                        </a-form-item>
                        <a-form-item label="AASTU密钥系统端口：" v-bind="formStyle" required>
                            <a-input type="text"  class="formWidth" v-decorator="[
                                        'port',
                                        {
                                            rules: [{ required: true}, { validator: this.verify.validateIP.bind(this) }],
                                            getValueFromEvent: event => {
                                                return this.verify.formalIP(event,18)
                                            }
                                        }
                                    ]"  placeholder="请输入端口号"/>
                        </a-form-item>
                        <a-form-item v-bind="formStyle" label="用户名" required>
                            <a-input  class="formWidth"
                                      placeholder="请输入用户名"
                                    v-decorator="[
                        'name',
                        {   rules: [{ required: true, message: '请输入汉字、字母、数字、_或-字符' },{validator:this.verify.validateName.bind(this)}],
                            getValueFromEvent: (event) => {
                                return this.verify.formalSpace(event)
                            }
                         }
                    ]"
                            />
                        </a-form-item>
                        <a-form-item v-bind="formStyle" label="密码" required>
                            <a-input  class="formWidth"
                                      placeholder="请输入密码"
                                    v-decorator="[
                        'name',
                        {   rules: [{ required: true, message: '请输入汉字、字母、数字、_或-字符' },{validator:this.verify.validateName.bind(this)}],
                            getValueFromEvent: (event) => {
                                return this.verify.formalSpace(event)
                            }
                         }
                    ]"
                            />
                        </a-form-item>
                        <a-form-item v-bind="formStyle" label="使用代理" required>
                            <a-radio-group v-model = 'strategyObj.strategyType'>
                                <a-radio value="1" style="width:160px;margin-left: 20px; margin-right: 10px;">是</a-radio>
                                <a-radio value="0" >否</a-radio>
                            </a-radio-group>
                        </a-form-item>
                        <a-form-item label=" " v-bind="formStyle" class="noLabelAfter">
                            <a-button type="primary" size="default"  class="btnGreen" style="margin-left: 0">测试连接</a-button>
                        </a-form-item>
                    </div>
                </div>
            </div>
           <!-- <div style="width: 100%; margin-bottom: 35px; margin-top: 15px; text-align: center">
                <a-button type="primary" size="default" style="width: 110px;" @click="confirm">保存设置</a-button>
            </div>-->
            </a-form>
            <a-form  ref="form" :form="form2">
                <div class="syMsg">
                <div class="syMsgTit">物联网平台配置</div>
                <div class="syMsgCot" style="margin-bottom: 0">
                    <div class="onePageMsg" style="min-height: 100px !important;">
                        <a-form-item label="物联网平台地址：" v-bind="formStyle" required>
                            <a-input type="text"  class="formWidth" v-decorator="[
                                        'ip',
                                        {
                                            rules: [{ required: true}, { validator: this.verify.validateIP.bind(this) }],
                                            getValueFromEvent: event => {
                                                return this.verify.formalIP(event,18)
                                            }
                                        }
                                    ]"  placeholder="请输入IP地址"/>
                        </a-form-item>
                        <a-form-item label="物联网平台端口：" v-bind="formStyle" required>
                           <a-input-number
                                   placeholder="请输入端口"
                                   :min="1"
                                   :max="65535"
                                   :formatter="verify.limitInteger"
                                   :parser="verify.limitInteger"
                                   style="width: 360px"
                                   v-decorator="['port', { rules: [{ required: true, message: '请输入1-65535的正整数' }] }]"
                           ></a-input-number>
                        </a-form-item>
                        <a-form-item v-bind="formStyle" label="网关用户名" required>
                            <a-input  class="formWidth"
                                      placeholder="请输入网关用户名"
                                      v-decorator="[
                        'gwUser',
                        {   rules: [{ required: true, message: '请输入汉字、字母、数字、_、=或-字符' },{validator:this.verify.validateNameE.bind(this)}],
                            getValueFromEvent: (event) => {
                                return this.verify.formalSpace(event)
                            }
                         }
                    ]"
                            />
                        </a-form-item>
                        <a-form-item v-bind="formStyle" label="网关密码" required>
                            <a-input  class="formWidth"
                                      placeholder="请输入网关密码"
                                      v-decorator="[
                        'gwPwd',
                        {   rules: [{ required: true, message: '请输入汉字、字母、数字、_、=或-字符' },{validator:this.verify.validateNameE.bind(this)}],
                            getValueFromEvent: (event) => {
                                return this.verify.formalSpace(event)
                            }
                         }
                    ]"
                            />
                        </a-form-item>
                         <a-form-item v-bind="formStyle" label="网关产品ID" required>
                            <a-input  class="formWidth"
                                      placeholder="请输入网关产品ID"
                                      v-decorator="[
                        'gwProductKey',
                        {   rules: [{ required: true, message: '请输入汉字、字母、数字、_、=或-字符' },{validator:this.verify.validateNameE.bind(this)}],
                            getValueFromEvent: (event) => {
                                return this.verify.formalSpace(event)
                            }
                         }
                    ]"
                            />
                        </a-form-item>
                        <a-form-item label="物联网平台根证书：" class="handFile formError" v-bind="formStyle"   :extra="rootCertMsg">
                    <a-input v-model="rootCertFileName" read-only style="width: 360px; float: left"
                             disabled :maxlength="100" placeholder="请选择crt文件" />
                    <a href="javascript:;">
                        <input ref="rootCert" type="file" name="rootCert"
                               accept=".crt"
                               @change="onChangeUpdateFile($event,'rootCert','rootCertFileName','rootCertMsg')"
                               required />选择文件
                    </a>
                </a-form-item>
                         <a-form-item label="网关证书：" class="handFile formError" v-bind="formStyle"   :extra="gwCertMsg">
                    <a-input v-model="gwCertFileName" read-only style="width: 360px; float: left"
                             disabled :maxlength="100" placeholder="请选择crt文件" />
                    <a href="javascript:;">
                        <input ref="gwCert" type="file" name="gwCert"
                               accept=".crt"
                               @change="onChangeUpdateFile($event,'gwCert','gwCertFileName','gwCertMsg')"
                               required />选择文件
                    </a>
                </a-form-item>
                         <a-form-item label="网关私钥证书：" class="handFile formError" v-bind="formStyle"   :extra="gwKeyFileMsg">
                    <a-input v-model="gwKeyFileName" read-only style="width: 360px; float: left"
                             disabled :maxlength="100" placeholder="请选择key文件" />
                    <a href="javascript:;">
                        <input ref="gwKeyFile" type="file" name="gwKeyFile"
                               accept=".key"
                               @change="onChangeUpdateFile($event,'gwKeyFile','gwKeyFileName','gwKeyFileMsg')"
                               required />选择文件
                    </a>
                </a-form-item>
                        <a-form-item label=" " v-bind="formStyle" class="noLabelAfter">
                            <a-button type="primary" size="default"  class="btnGreen" style="margin-left: 0" @click="saveApply">测试物联网平台</a-button>
                        </a-form-item>
                    </div>
                </div>
            </div>
            </a-form>
        </a-card>
        <div class="spinBox" v-if="spinning">{{spinText}}</div>
    </div>
</template>

<script>
    import verify from 'libs/verify'
    import { mapState } from 'vuex'
    import moment from 'moment'
    export default {
        name: 'sysTime',
        data () {
            return {
                form: this.$form.createForm (this),
                form2: this.$form.createForm (this),
                verify,
                spinning: false,
                spinText: '请稍后...',
                formItem:{
                    currenTime:'',
                    dateTime:undefined,
                    oldDateTime: '',
                },
                isChange: false,
                currentTimeTimer: '',
                msg1: '',
                statusList:[{value:'0',label:'开启'},{value:'1',label:'关闭'}],
                // localStratumList:[],
                timeZoneList:[],
                dIndex: 1,
                ipList: [{dIp: '', dIpErr: '', index: 1}],
                syncHostTimeModelList:[],
                handleNtpConfFlag:false,
                strategyObj:{
                    strategyType:'1',
                    strategyDate:'1',
                    strategyFileSize:'1',

                },
                formStyle: {
                    labelCol: {span: 5},
                    wrapperCol: {span:19}
                },
                rootCert:"",
                rootCertMsg:"",
                rootCertFileName:"",
                gwCert:'',
                gwCertMsg:'',
                gwCertFileName:'',
                gwKeyFile:'',
                gwKeyFileMsg:'',
                gwKeyFileName:'',
            }
        },
        computed: {
            ...mapState ({
                isLoginOut: state => state.common.isLoginOut,
                formItemLayoutWithOutLabel: state => state.common.formItemLayoutWithOutLabel,
            })
        },
        created () {
           /* this.init ()*/
           this.queryConfigFun()
        },
        methods: {
            /* 点击确定时禁止修改选中时间 */
            checkDateTime() {
                this.isChange = true
                this.startStatsTimer()
                if (this.formItem.dateTime === null || this.formItem.dateTime === undefined ) {
                    this.msg1 = '请选择时间'
                    return false
                } else {
                    this.msg1 = ''
                }
            },
            /* 判断是否需要修改服务器时间设置值 */
            clearDateTime(value) {
                if (value) {
                    this.formItem.oldDateTime = this.formItem.dateTime
                    this.isChange = true
                    this.msg1 = ''
                } else {
                    if (this.formItem.oldDateTime === this.formItem.dateTime) {
                        this.isChange = false
                    }
                }
                this.startStatsTimer()
            },
            /* 获取当前时间 */
            getCurrentTime() {
                let _this = this
                this.$get('api/synchosttime/getHostCurrrentTime').then(res => {
                    if (res.code === 0) {
                        _this.formItem.currenTime = res.data.hostCurrentTime
                        if (!_this.isChange) {
                            _this.formItem.dateTime = moment(res.data.hostCurrentTime)
                        }
                    } else {
                        _this.$message.error(res.message)
                        _this.clearStatsTimer()
                    }
                }).catch(() => {
                    _this.clearStatsTimer()
                })
            },

            /**
             * Function    : startHomeStatsTimer
             * Description : 开启定时器
             * Input       : none
             * Return      : none
             */
            startStatsTimer() {
                let _this = this
                this.clearStatsTimer()
                _this.getCurrentTime()
                //获取当前时间
                if (_this.currentTimeTimer === null) {
                    _this.currentTimeTimer = setInterval(function () {
                        if(!_this.isLoginOut) {
                            _this.getCurrentTime()
                        }
                    }, 1 * 1000)
                }
            },

            /**
             * Function    : clearStatsTimer
             * Description : 清楚定时器
             * Input       : none
             * Return      : none
             */
            clearStatsTimer() {
                let _this = this
                //获取当前时间
                if (_this.currentTimeTimer !== null) {
                    clearInterval(_this.currentTimeTimer)
                    _this.currentTimeTimer = null
                }
            },
            //设置服务器时间设置时间
            applyConf() {
                let _this = this;
                if (this.formItem.dateTime === null || this.formItem.dateTime === undefined ) {
                    this.msg1 = '请选择加密机时间'
                    return false
                } else {
                    this.msg1 = ''
                }
                let dataTime = moment (this.formItem.dateTime)
                  .format ('YYYY-MM-DD HH:mm:ss')
                  .valueOf ()
                 _this.$post('api/synchosttime/setHostCurrrentTime', {hostCurrentTime:dataTime}).then(res => {
                    if (res.code === 0) {
                        _this.init();
                        _this.$message.success(res.message);
                        _this.isChange = false
                    } else {
                        _this.$message.error(res.message)
                    }
                })
            },
            /**
             * Function    : formalIP
             * Description : IP过滤器
             * Input       : none
             * Return      : none
             */
            formalIP ( event ) {
                let a = event.target.value
                a = a.replace (/[^\d\.]/g, '')
                return a
            },
            /**
             * Function    : init
             * Description : 初始化列表
             * Input       : none
             * Return      : none
             */
            init () {
                let _this = this
                _this.startStatsTimer()
            },
            /* 获取NTP配置信息 */
            getNtpConf() {
                let _this = this
                this.$get('api/synchosttime/getNtpConf').then(res => {
                    if (res.code === 0) {
                        let data = res.data
                        data.localStratum = res.data.localStratum.toString()
                        if(data.syncTimeSrvs !== null && data.syncTimeSrvs!== undefined){
                            let dataList = data.syncTimeSrvs.split(',')
                            _this.ipList = []
                            dataList.forEach((item, index) => {
                                let obj = {}
                                obj.dIp = item
                                obj.dIpErr = ''
                                obj.index = index
                                _this.ipList.push(obj)
                            })
                        }
                        this.$nextTick (() => {
                            // _this.form.setFieldsValue (_this.$pick (data, [ 'syncHostTimeModel', 'timeZone','localStratum' ]))
                            _this.form.setFieldsValue (_this.$pick (data, [ 'syncHostTimeModel', 'timeZone' ]))
                        })
                    } else {
                        _this.$message.error(res.message)
                    }
                })
            },
            /**
             * Function    : remove
             * Description : 减少对端IP表单行
             * Input       : k行号下划线
             * Return      : none
             */
            removeIP (k) {
                this.ipList.splice(k, 1)
            },
            /**
             * Function    : add
             * Description : 添加对端IP单行
             * Input       : none
             * Return      : none
             */
            addIP () {
                if (this.ipList.length < 5) {
                    this.dIndex++
                    let a = {dIp: '', dIpErr: '', index: this.ipList.length}
                    this.ipList.push(a)
                } else {
                    return false
                }
            },
            /**
             * Function    : validateDuiDuanIp
             * Description : 对端IP校验
             * Input       : index,ip
             * Return      : None
             */
            validateDuiDuanIp (index, ip) {
                ip = ip || ''
                let msg = this.verify.ipAddress(ip) ? '' : '请输入有效IP地址'
                let someList = this.ipList.filter(function(list) {
                    return list.dIp === ip && list.dIp!=='' && list.dIp !==undefined
                })
                if (someList.length > 1) {
                    this.ipList[index].dIpErr = 'IP地址已存在，请重新填写'
                    this.ipList[index].dIp = undefined
                }else{
                    this.$set(this.ipList[index], 'dIpErr', msg)
                }
            },
            /**
             * 提交表单
             * @param name
             */
            setSynchro ( ) {
                let _this = this
                let isPass = true
                let isNull = false
                for (let i = 0; i < _this.ipList.length; i++) {
                    let item = _this.ipList[ i ]
                    if (item.dIp !== '' && item.dIp !== undefined) {
                        if (item.dIpErr === '') {
                        } else {
                            isPass = false
                        }
                    } else {
                        isNull = true
                        _this.ipList[ i ].dIpErr = '请输入有效IP地址'
                    }
                }
                this.form.validateFields (( err, value ) => {
                    if (!err) {
                        if (isNull || !isPass) {
                            return
                        }
                        let newList = []
                        _this.ipList.forEach(item=>{
                            newList.push(item.dIp)
                        })
                        value.syncTimeSrvs = newList.join(',')
                        _this.$post ('api/synchosttime/handleNtpConf',value).then (res => {
                            if (res.code === 0) {
                                _this.getNtpConf()
                                _this.$message.success (res.message)
                            } else {
                                _this.$message.error (res.message)
                            }
                        })
                    }
                })
            },
            /**
             * Function    : confirm
             * Description : 表单提交
             * Input       : data
             * Return      : none
             */
            confirm (e) {
                e.preventDefault();
                this.form.validateFields((err, value) => {
                    if (!err) {

                    }
                })
            },
            onChangeUpdateFile ( e ,type,name,err) {
                let _this = this
                if (e.target.files[ 0 ] === undefined) {
                    _this[type] = ''
                    _this[name]= ''
                } else {
                    _this[type] = e.target.files[ 0 ]
                    _this[name] = e.target.files[ 0 ].name
                    _this[err] = ''
                    let indexDot = _this[name].lastIndexOf ('.')
                    let fileTypePass = _this[name].substr (indexDot + 1, 3) !== 'crt'
                    if(type === 'gwKeyFile'){
                        fileTypePass = _this[name].substr (indexDot + 1, 3) !== 'key'
                    }else{
                        fileTypePass = _this[name].substr (indexDot + 1, 3) !== 'crt'
                    }
                    if (fileTypePass) {
                        _this[err] = '请选择crt文件'
                        _this[type] = ''
                    } else {
                        let size = e.target.files[ 0 ].size
                        let mSize = 1024 * 1024 * 500
                        if (size > mSize) {
                            _this[err] = '请选择小于500M的文件'
                            _this[type]= ''
                        }
                    }
                }
                if (this.$refs[type] !== undefined) {
                    this.$refs[type].value = ''
                }
            },
            queryConfigFun () {
                this.$get('/iot/queryConfig').then(res => {
                    if (res.code === 0) {
                          console.log(res.data)
                        let data = res.data
                        data.port = Number(data.port)
                        this.$nextTick(() => {
                            this.form2.setFieldsValue(
                                this.$pick(data, [
                                    'ip',
                                    'port',
                                    'gwUser',
                                    'gwPwd',
                                    'gwProductKey',
                                ])
                            )
                        })
                    } else {
                        this.$message.error(res.message)
                    }
                }).catch(res => {
                    this.$message.error(res.message)
                })

            },
            /**
             * Function    : saveApply
             * Description : 用户信息新增、编辑保存
             * Input       : name
             * Return      : none
             */
            saveApply ( e ) {
                e.preventDefault ()
                let _this = this
                /*if (_this.rootCertFileName === '') {
                    _this.rootCertMsg = '请选择crt文件'
                }
                if (_this.gwCertFileName === '') {
                    _this.gwCertMsg = '请选择crt文件'
                }
                if (_this.gwKeyFileName === '') {
                    _this.gwKeyFileMsg = '请选择key文件'
                }*/
                this.form2.validateFields (( err, value ) => {
                    if (!err) {
                        if (_this.rootCertMsg !== undefined && _this.rootCertMsg !== '' || _this.gwCertMsg !== undefined && _this.gwCertMsg !== '' || _this.gwKeyFileMsg !== undefined && _this.gwKeyFileMsg !== '' ) {
                            return
                        }
                        let formData = new FormData ()
                        _this.spinning = true
                        _this.spinText = '系统文件正在上传中，请稍后...'
                        formData.append ('ip', value.ip)
                        formData.append ('port', value.port)
                        formData.append ('gwUser', value.gwUser)
                        formData.append ('gwPwd', value.gwPwd)
                        formData.append ('gwProductKey', value.gwProductKey)
                        formData.append ('rootCert', _this.rootCert)
                        formData.append ('gwCert', _this.gwCert)
                        formData.append ('gwKeyFile', _this.gwKeyFile)
                        _this.$uploadPost ('/iot/modifyConfig', formData).then (res => {
                            if (res.code === 0) {
                                _this.$message.success('更新成功',10)
                                _this.spinning = false
                                _this.rootCert = ''
                                _this.gwCert = ''
                                _this.gwKeyFile = ''
                                _this.rootCertFileName = ''
                                _this.gwCertFileName = ''
                                _this.gwKeyFileName = ''
                                if (_this.$refs.rootCert !== undefined) {
                                    _this.$refs.rootCert.value = ''
                                }
                                if (_this.$refs.gwCert !== undefined) {
                                    _this.$refs.gwCert.value = ''
                                }
                                if (_this.$refs.gwKeyFile !== undefined) {
                                    _this.$refs.gwKeyFile.value = ''
                                }
                            } else {
                                _this.$message.error (res.message)
                                _this.spinning = false
                                _this.rootCert = ''
                                _this.gwCert = ''
                                _this.gwKeyFile = ''
                                _this.rootCertFileName = ''
                                _this.gwCertFileName = ''
                                _this.gwKeyFileName = ''
                                if (_this.$refs.rootCert !== undefined) {
                                    _this.$refs.rootCert.value = ''
                                }
                                if (_this.$refs.gwCert !== undefined) {
                                    _this.$refs.gwCert.value = ''
                                }
                                if (_this.$refs.gwKeyFile !== undefined) {
                                    _this.$refs.gwKeyFile.value = ''
                                }
                            }

                        })
                    }
                })

            },
        },
        destroyed () {
            this.clearStatsTimer ()
        }
    }
</script>
<style lang="less" scoped>
    .dynamic-delete-button {
        cursor: pointer;
        position: relative;
        top: 4px;
        font-size: 24px;
        color: #999;
        transition: all .3s;
        margin-left: 8px;
    }

    .dynamic-delete-button:hover {
        color: #777;
    }

    .dynamic-delete-button[disabled] {
        cursor: not-allowed;
        opacity: 0.5;
    }
    .strategyTypeClass{
        position: absolute; width: 500px; left: 530px; top:10px;
    }
</style>
